<template>
  <div class="holder">
    <el-row :gutter="20">
      <!-- 左边 -->
      <el-col :xs="24" :sm="8" :lg="4">
        <div class="left">
          <el-input
            placeholder="请输入分类名称"
            v-model="filterText"
            suffix-icon="el-input__icon el-icon-search"
            clearable
          >
          </el-input>
          <el-tree
            class="filter-tree"
            :data="data"
            :props="defaultProps"
            @node-click="handleNodeClick"
            :filter-node-method="filterNode"
            @node-expand="handlerNodeExpand"
            ref="tree"
          >
            <span class="custom-tree-node" slot-scope="{ node, data }">
              <span>
                <img
                  style="vertical-align: text-top"
                  v-if="data.children.length !== 0"
                  :src="[node.expanded ? treeicon.one : treeicon.two]"
                  alt=""
                />
                <img
                  style="vertical-align: text-top"
                  v-if="data.children.length === 0"
                  :src="treeicon.there"
                  alt=""
                />
                {{ node.label }}
              </span>
            </span>
          </el-tree>
        </div>
      </el-col>
      <!-- 右边 -->
      <el-col :xs="24" :sm="16" :lg="20">
        <div class="right">
          <div class="top">
            <div
              class="examination"
              v-for="item in examquestion"
              :key="item.id"
            >
              <!-- 图片 -->
              <div class="picture">
                <img :src="item.src" alt="" />
              </div>
              <!-- 操作 -->
              <div class="operation">
                <div class="txt">{{ item.a }}</div>
                <div class="note">
                  固定试题考试
                  <span>|</span>
                  总分100分
                  <span>|</span>
                  限时60分钟
                  <span>|</span>
                  所有人可考
                </div>
                <div class="times">系统管理员 创建于{{ item.b }}</div>
                <!-- 按钮设置 -->
                <div class="setbutton">
                  <el-button
                    plain
                    type="primary"
                    size="small"
                    @click="
                      starttest({
                        name: item.name,
                        times: item.times,
                        id: item.id,
                      })
                    "
                    >开始考试</el-button
                  >
                  <el-button plain type="primary" size="small"
                    >统计分析</el-button
                  >
                  <el-button plain type="primary" size="small" @click="sign"
                    >考试标记</el-button
                  >
                  <el-button plain type="success" size="small"
                    >考试记录</el-button
                  >
                </div>
                <!-- 考试次数 -->
                <div class="testtime">
                  {{ item.c }}
                  <p>已考次数</p>
                </div>
                <!-- 考试标记 -->
                <div class="tester" v-if="signswitch">
                  <img src="@/assets/images/考试标记.svg" alt="" />
                  <div class="txters">已考</div>
                </div>
              </div>
            </div>
            <!-- <div class="examination">
     
              <div class="picture">
                <img
                  src="https://img0.baidu.com/it/u=2217638595,3877722569&fm=253&fmt=auto&app=120&f=JPEG?w=719&h=500"
                  alt=""
                />
              </div>
              
              <div class="operation">
                <div class="txt">日常生活行为准则考试</div>
                <div class="note">
                  固定试题考试
                  <span>|</span>
                  总分100分
                  <span>|</span>
                  限时60分钟
                  <span>|</span>
                  所有人可考
                </div>
                <div class="times">系统管理员 创建于2023/02/16</div>
                
                <div class="setbutton">
                  <el-button plain type="primary" size="small"
                    >开始考试</el-button
                  >
                  <el-button plain type="primary" size="small"
                    >统计分析</el-button
                  >
                  <el-button plain type="primary" size="small" @click="sign"
                    >考试标记</el-button
                  >
                  <el-button plain type="success" size="small"
                    >考试记录</el-button
                  >
                </div>
               
                <div class="testtime">
                  3
                  <p>已考次数</p>
                </div>
               
                <div class="tester" v-if="signswitch">
                  <img src="@/assets/images/考试标记.svg" alt="" />
                  <div class="txters">已考</div>
                </div>
              </div>
            </div> -->
          </div>
          <div class="pagination">
            <el-pagination
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page="pageInfo.pageNo"
              :page-sizes="[4, 10, 20]"
              :page-size="pageInfo.pageSize"
              layout="total, sizes, prev, pager, next, jumper"
              :total="pageInfo.total"
            >
            </el-pagination>
          </div>
        </div>
      </el-col>
    </el-row>
    <!-- 考试页面 -->
    <!-- <el-dialog title="提示" :visible.sync="testpaper"> 123 </el-dialog> -->
  </div>
</template>

<script>
import Countdowm from "@/components/countDown/index.vue";
export default {
  data() {
    return {
      data: [
        {
          id: 1,
          label: "一级 1",
          children: [
            {
              id: 4,
              label: "二级 1-1",
              children: [
                {
                  id: 9,
                  label: "三级 1-1-1",
                  icon: "el-icon-info",
                  children: [],
                },
                {
                  id: 10,
                  label: "三级 1-1-2",
                  icon: "el-icon-info",
                  children: [],
                },
              ],
            },
          ],
        },
        {
          id: 2,
          label: "一级 2",
          children: [
            {
              id: 5,
              label: "二级 2-1",
              children: [],
            },
            {
              id: 6,
              label: "二级 2-2",
              children: [],
            },
          ],
        },
        {
          id: 3,
          label: "一级 3",
          children: [
            {
              id: 7,
              label: "二级 3-1",
              children: [],
            },
            {
              id: 8,
              label: "二级 3-2",
              children: [],
            },
          ],
        },
      ],
      filterText: "",
      // 分页查询
      pageInfo: {
        // 总条数
        total: 0,
        // 当前页
        pageNo: 1,
        // 每页条数
        pageSize: 15,
      },
      defaultProps: {
        children: "children",
        label: "label",
      },
      // 图标数据
      treeicon: {
        one: require("@/assets/images/空文件.svg"),
        two: require("@/assets/images/文件夹.svg"),
        there: require("@/assets/images/文件.svg"),
      },
      // 考试标记
      signswitch: false,
      examquestion: [
        {
          id: 1,
          name: "秦学海",
          times: 60,
          src: "https://img0.baidu.com/it/u=1933910624,2664877781&fm=253&fmt=auto&app=138&f=JPG?w=900&h=500",
          a: "日常生活行为准则考试",
          b: "2023/02/16",
          c: 4,
          d: true,
        },
        {
          id: 2,
          name: "秦学海",
          times: 60,
          src: "https://img0.baidu.com/it/u=2217638595,3877722569&fm=253&fmt=auto&app=120&f=JPEG?w=719&h=500",
          a: "日常生活行为准则考试",
          b: "2023/02/16",
          c: 4,
          d: true,
        },
        {
          id: 3,
          name: "秦学海",
          times: 60,
          src: "https://img1.baidu.com/it/u=24353857,711401655&fm=253&fmt=auto&app=138&f=JPG?w=592&h=500",
          a: "日常生活行为准则考试",
          b: "2023/02/16",
          c: 4,
          d: true,
        },
        {
          id: 4,
          name: "秦学海",
          times: 60,
          src: "https://img0.baidu.com/it/u=3173337603,2995734022&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=375",
          a: "日常生活行为准则考试",
          b: "2023/02/16",
          c: 4,
          d: true,
        },
      ],
    };
  },
  components: {
    Countdowm,
  },
  watch: {
    // 调用 Tree 实例的filter方法，参数为关键字
    filterText(val) {
      this.$refs.tree.filter(val);
    },
  },
  created() {},
  mounted() {},
  methods: {
    handleNodeClick(data) {
      console.log(data);
    },
    // 对树节点进行筛选时执行的方法，返回 true 表示这个节点可以显示，返回 false 则表示这个节点会被隐藏
    filterNode(value, data) {
      if (!value) return true;
      return data.label.indexOf(value) !== -1;
    },
    // 节点被展开时触发的事件
    handlerNodeExpand(data, node, element) {
      window.console.log(data);
      window.console.log(node);
      window.console.log(element);
    },
    // 分页 左右 点击 输入
    handleSizeChange(val) {
      // console.log(`每页 ${val} 条`);
      this.pageInfo.pageSize = val;
      // this.loadData();
    },
    // 分页多少条点击事件
    handleCurrentChange(val) {
      // console.log(`当前页: ${val}`);
      this.pageInfo.pageNo = val;
      // this.loadData();
    },
    // 考试标记
    sign() {
      this.signswitch = !this.signswitch;
      console.log("sdfs", this.signswitch);
    },
    // 开始考试
    starttest(row) {
      console.log("考试数据", row);
      this.$router.push({
        path: "/testpaper",
        query: {
          name: row.name,
          times: row.times,
          id: row.id,
        },
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.holder {
  padding: 20px 25px;
  height: 887px;
  // background-color: skyblue;
  @media screen and (min-height: 950px) and (max-height: 990px) {
    padding: 35px 25px;
  }
  @media screen and (min-height: 1070px) {
    padding: 90px 25px;
  }
  .left {
    height: 848px;
    border: 1px solid #ccc;
    overflow: hidden;
    box-sizing: border-box;
    padding: 20px 20px 0;
    ::v-deep .el-input__inner {
      border: 1px solid #1997c9;
      border-radius: 0;
      // color: #fff;
      // background-color: #072a4f;
    }
    ::v-deep .el-tree-node.is-current > .el-tree-node__content {
      // 设置颜色 el-tree 选中节点的颜色
      background-color: rgba(135, 206, 235, 0.2);
      color: #409eff; // 节点的字体颜色
      font-weight: bold; // 字体加粗
    }
    ::v-deep .el-tree-node__content:hover {
      background-color: #66b1ff87;
    }
    ::v-deep .el-tree {
      // background-color: #f2f2f2;
      // color: red;
      margin-top: 30px;
    }
  }
  .right {
    width: 100%;
    height: 848px;
    border: 1px solid #ccc;
    .top {
      height: 90%;
      // background-color: skyblue;
      // display: flex;
      // flex-direction: column;
      // justify-content: space-between;
      overflow: auto;
      .examination {
        height: 23%;
        margin-bottom: 15px;
        border: 1px solid #ccc;
        // background-color: skyblue;
        padding: 10px 15px;
        display: flex;
        .picture {
          width: 20%;
          height: 100%;
          img {
            width: 100%;
            height: 100%;
          }
        }
        .operation {
          padding-left: 70px;
          width: 80%;
          position: relative;
          .txt {
            margin-top: 8px;
            font-size: 30px;
            font-weight: 700;
            font-family: "楷体";
          }
          .note {
            margin: 5px 0 0 7px;
            font-size: 14px;
            color: rgb(99, 97, 97);
            span {
              display: inline-block;
              width: 15px;
              text-align: center;
              position: relative;
              top: -1px;
            }
          }
          .times {
            margin: 60px 0 0 7px;
            font-size: 16px;
            color: rgb(99, 98, 98);
          }
        }
        .setbutton {
          position: absolute;
          right: 12px;
          bottom: 7px;
        }
        .testtime {
          position: absolute;
          right: 65px;
          top: 10px;
          text-align: center;
          font-size: 50px;
          font-weight: 700;
          color: #1884f6;
          p {
            margin-top: 0;
            font-size: 18px;
          }
        }
        .tester {
          position: absolute;
          top: -8px;
          left: -49px;
          img {
            width: 60px;
          }
        }
        .txters {
          color: red;
          font-size: 14px;
          transform: rotate(45deg);
          position: absolute;
          top: 17px;
          right: 13px;
        }
      }
    }
    .pagination {
      height: 10%;
      position: relative;
      border-top: 1px solid #ccc;
      .el-pagination {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
      }
    }
  }
}
</style>